<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-24 16:36:43
 * @LastEditTime: 2023-06-28 16:57:09
-->
<script lang="ts" setup name="FormAuthorityConfig">
import { computed, reactive, watch } from 'vue'

const state = reactive({
  tableData: [],
  isIndeterminate: false,
  permSelect: '',
  checkStatus: {
    readOnly: true,
    editable: false,
    hide: false
  }
})

const flowStore = useFlowStore()
const nowNode = computed(() => flowStore.selectedNode)
const formData = computed(() => flowStore.design.formItems)
const formPerms = computed(() => flowStore.selectedNode.props.formPerms)

const allSelect = (type: string) => {
  state.permSelect = type
  formPerms.value.forEach((f: { perm: string; }) => (f.perm = type))
}
const formPermsLoad = (
  oldPermMap: { get: (arg0: any) => any; },
  forms: any[]
) => {
  forms.forEach(form => {
    if (form.name === 'SpanLayout') {
      formPermsLoad(oldPermMap, form.props.items)
    }
    else {
      // 刷新名称
      const old = oldPermMap?.get(form.id)
      if (old) {
        old.title = form.title
        old.required = form?.props?.required
        formPerms.value.push(old)
      }
      else {
        formPerms.value.push({
          id: form?.id,
          title: form?.title,
          required: form?.props?.required,
          perm: flowStore.selectedNode.type === 'INITIATOR' ? 'E' : 'R'
        })
      }
    }
  })
}

// 备份
const oldPermMap = formPerms.value?.toMap?.('id')
// 重新清空，按顺序加载权限
formPerms.value.length = 0
formPermsLoad(oldPermMap, formData.value)

watch(
  () => formPerms.value,
  () => {
    const set: Set<string> = new Set(
      formPerms.value.map((f: { perm: any; }) => f.perm)
    )
    state.permSelect = set.size === 1 ? Array.from(set.values())[0] : ''
  },
  { deep: true }
)
</script>

<template>
  <el-table
    :header-cell-style="{ background: '#f5f6f6' }"
    :data="formPerms"
    border
    style="width: 100%;"
  >
    <el-table-column prop="title" show-overflow-tooltip label="表单字段">
      <template #default="{ row }">
        <span v-if="row.required" style="color: #c75450;"> * </span>
        <span>{{ row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="readOnly" label="只读" width="80">
      <template #header>
        <el-radio v-model="state.permSelect" label="R" @change="allSelect('R')">
          只读
        </el-radio>
      </template>
      <template #default="{ row }">
        <el-radio v-model="row.perm" label="R" :name="row.id" />
      </template>
    </el-table-column>
    <el-table-column
      v-if="nowNode.type !== 'CC'"
      prop="editable"
      label="可编辑"
      width="90"
    >
      <template #header>
        <el-radio v-model="state.permSelect" label="E" @change="allSelect('E')">
          可编辑
        </el-radio>
      </template>
      <template #default="{ row }">
        <el-radio v-model="row.perm" label="E" :name="row.id" />
      </template>
    </el-table-column>
    <el-table-column prop="hide" label="隐藏" width="80">
      <template #header>
        <el-radio v-model="state.permSelect" label="H" @change="allSelect('H')">
          隐藏
        </el-radio>
      </template>
      <template #default="{ row }">
        <el-radio v-model="row.perm" label="H" :name="row.id" />
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
:deep(.el-table__row) {
  & > td:first-child {
    .cell {
      text-align: left;
    }
  }

  .cell {
    text-align: center;
  }

  .el-radio__label {
    display: none;
  }
}
</style>
